<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>photo state switch</title>
	<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-css/css/bootstrap.css">
	<script src="/vendor/mootools/dist/mootools-core.js"></script>
	<style>
		ul > li {
			position: relative;
			margin-top: 30px;
			margin-left: 10px;
			float:left;
		}
		.pic {
			width: 260px;
			height: 173px;
			
			background-repeat: no-repeat;
			background-position: center top;
			background-size: auto 100%;
			border: 1px solid #ededed;
			border-radius: 5px;
		}
		.item .item-hide {
			position:absolute;
			right: 10px;
			top: 10px;
			color: #ffffff;
			font-size: 18px;
			line-height: 1;
			vertical-align: middle;
			width: 32px;
			height: 32px;
			background-color: #00ff00;
			cursor: pointer;
			border-radius: 16px;
			text-align: center;
			vertical-align: center;
		}
		.item .item-show {
			position:absolute;
			right: 10px;
			top: 10px;
			color: #ffffff;
			font-size: 18px;
			width: 32px;
			height: 32px;
			text-align: center;
			vertical-align: center;
			background-color: #ff0000;
			cursor: pointer;
			border-radius: 16px;
			line-height: 1;
			vertical-align: middle;
		}
		.item .glyphicon {
			top: 6px;
		}
		.items-hide .pic {
			opacity: .3;
		}
		.dib {
			display: inline-block;
		}
		#showAll, #hideAll {
			margin: 5px 15px;
		}
		.tossmsg {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			padding: 10px 15px;
			text-align: center;
			white-space: nowrap;
			color: #ffffff;
			background-color: #000000;
			font-size: 1.2em;
		}
	</style>
</head>
<body>
	<header>
		<h1 class="text-center">Wephoto Photo State Switch</h1>
	</header>
	<div class="container">
		<div class="row">
			<input class="form-control" id="eventId" type="text" placeholder="Input event id and enter">
		</div>
		<div class="row">
			<button id="showAll" class="btn" >Show All</button>
			<button id="hideAll" class="btn" >Hide All</button> 
		</div>
		<div class="row clearfix">
			<ul class="items items-show" style="list-style:none;">
			</ul>
		</div>
		<div class="row clearfix">
			<ul class="items items-hide" style="list-style:none;">

			</ul>
		</div>
	</div>
	<script type="text/javascript">
	var prefix = location.protocol + "//" + location.host + /assets/;
	var hide = function(e, ele){
		var li = $(ele).getParent('.item');
		var photoId = li.get('photo-id');
		$(ele).setStyle('display', 'none');
		new Request.JSON({
			url: "/photoUpdate/hide?photoId=" + photoId,
			onSuccess: function(res){
				console.log(res);
				console.log(li);
				li.inject(document.getElement('.items-hide'), 'top')
					.getElement('.item-show')
					.removeClass('item-show')
					.addClass('item-hide');
				$(ele)
					.setStyle('display', 'block')
					.getElement('span')
					.removeClass('glyphicon-remove')
					.addClass('glyphicon-ok');
			},
			onFailure: function(res){
				console.log(res);
				$(ele).setStyle('display', 'block');
			}
		}).get();
	};
	var show = function(e, ele){
		var li = $(ele).getParent('.item');
		var photoId = li.get('photo-id');
		$(ele).setStyle('display', 'none');
		new Request.JSON({
			url: "/photoUpdate/show?photoId=" + photoId,
			onSuccess: function(res){
				console.log(res);
				console.log(li);
				li.inject(document.getElement('.items-show'))
					.getElement('.item-hide')
					.removeClass('item-hide')
					.addClass('item-show');
				$(ele)
					.setStyle('display', 'block')
					.getElement('span')
					.removeClass('glyphicon-ok')
					.addClass('glyphicon-remove');
			},
			onFailure: function(res){
				console.log(res);
				$(ele).setStyle('display', 'block');
			}
		}).get();

	};
	var tossMsg = function(msg, time){
		var tm = new Element('div', {
				class: 'tossmsg',
				html: msg|| ""
			});
		tm.inject(document.body);
		setTimeout(function(){
			tm.destroy();
		}, time || 1000);
	};
	var all = function(){
		var eventId;
		var type = $(this).get('id');
		var showingItems = $$('.items-show li');
		var hiddingItems = $$('.items-hide li');
		if(showingItems.length === 0 && hiddingItems.length === 0){
			tossMsg("There is nothing to hide or show! <br> Please input an event id and press 'Enter' key.");
		}
		if(type == 'showAll' && hiddingItems.length > 0){
			eventId = hiddingItems[0].get('event-id');
			new Request.JSON({
				url: '/photoUpdate/show?eventId=' + eventId,
				onSuccess: function(res){
					$$('.items-show, .items-hide').each(function(ele){ ele.empty(); });
					$('eventId').fireEvent('keydown', {id: eventId, type: type});
				}
			}).get();
		}else if(type == 'hideAll' && showingItems.length > 0){
			eventId = showingItems[0].get('event-id');
			new Request.JSON({
				url: '/photoUpdate/hide?eventId=' + eventId,
				onSuccess: function(res){
					$$('.items-show, .items-hide').each(function(ele){ ele.empty(); });
					$('eventId').fireEvent('keydown', {id: eventId, type: type});
				}
			}).get();
		}
	}
	$('hideAll').addEvent('click', all);
	$('showAll').addEvent('click', all);
	document.body.addEvent('click:relay(.item-show)', hide);
	document.body.addEvent('click:relay(.item-hide)', show);
	$('eventId').addEvent('keydown', function(e){
		if(e.id && e.type){
			e.key = 'enter';
		}
		if(e.key === 'enter'){
			var eventId = e.id || $(this).get('value').trim();
			eventId = Number.from(eventId);
			if(!eventId)
				return
			document.getElement('.items-hide').empty();
			document.getElement('.items-show').empty();
			var pr = prefix + eventId + "/";
			var onshowsuccess = function(d){
				if(d.length > 0){
					var html = '';
					d.forEach(function(p){
						html += '<li class="item" event-id="' + p.event_id + '" photo-id="' + p.photo_id + '" >'
									+ '<div class="pic" style="background-image:url(' + pr + p.filename + ')"></div>'
									+ 	'<div class="item-show " ><span class="glyphicon glyphicon-remove"></span></div></li>'
					});
					document.getElement('.items-show').set('html',html);
				}
			}
			var onhidesuccess = function(d){
				if(d.length > 0){
					var html = '';
					d.forEach(function(p){
						html += '<li class="item" event-id="' + p.event_id + '" photo-id="' + p.photo_id + '" >'
									+ '<div class="pic" style="background-image:url(' + pr + p.filename + ')"></div>'
									+ 	'<div class="item-hide " ><span class="glyphicon glyphicon-ok"></span></div></li>'
					});
					document.getElement('.items-hide').appendHTML(html);
				}
			}
			new Request.JSON({
				'url': '/photolist/' + eventId + '?type=show',
				'onSuccess': onshowsuccess
			}).get();
			new Request.JSON({
				'url': '/photolist/' + eventId + '?type=hide',
				'onSuccess': onhidesuccess
			}).get();
		}
	});

		
	</script>
</body>
</html>